<!--
    * @params { Number,String } imgType--背景样式选择
    * @params { Function } imgStyle -- 背景样式 返回一个对象
    * @params { String } title -- 主标题
    * @params { Function } titleStyle -- 主标题样式 返回同背景图
    * @params { Boolean } isTime -- 是否显示时间 ture 显示 默认false
    * @params { Object } time_position -- 时间位置样式
    * @params { String } logoUrl -- logo路径
    * @params { Function } logoStyle -- logo样式返回同背景图
    * @params { slot } 
    *   v-slot:head_left  左边卡槽
    *   v-slot:head_right 右边卡槽
-->
<template>
  <div :class="`container container_${imgType}`">
    <img :src="imgSrc" alt class="bgImage" :style="imgStyle()" />
    <div class="title" :style="titleStyle()">{{title}}</div>
    <div class="clock" :style="time_position" v-if="isTime">
      <data-v-clock color="#808080"></data-v-clock>
    </div>
    <div class="head_left">
      <slot name="head_left" />
    </div>
    <div class="head_right">
      <slot name="head_right" />
    </div>
    <img v-if="logoUrl" :src="logoUrl" class="logoStyle" :style="logoStyle" alt />
  </div>
</template>
<script>
export default {
  name: "data-v-head",
  props: {
    imgType: {
      type: [Number, String],
      default: 1
    },
    imgStyle: {
      type: Function,
      default: () => {}
    },
    title: {
      type: String,
      default: ""
    },
    titleStyle: {
      type: Function,
      default: () => {}
    },
    isTime: {
      type: Boolean,
      default: false
    },
    time_position: {
      type: Object,
      default: () => {
        return { left: "20px" };
      }
    },
    logoUrl: String,
    logoStyle: {
      type: Function,
      default: () => {}
    }
  },
  computed: {
    imgSrc() {
      return require(`./img/type_${this.imgType}.png`);
    }
  }
};
</script>
<style src="./index.less" lang='less' scoped></style>